import { merge } from 'lodash-es'
import { getViewportPx } from '@/utils/formatter'
const color = [
  '#FC5C53',
  '#47D147',
  '#F5BF49',
  '#5486F0',
  '#C763F2',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc'
]
const fontSize = getViewportPx(14)
// 雷达图公共hook
export const useRadarOptions = (data: any[], options?: any) => {
  let onlyOneSeries = false // 是否只有一条series数据
  if (!options) {
    options = {}
  }
  if (!options?.series?.length || options?.series?.length === 1) {
    onlyOneSeries = true
    if (!options?.series) {
      options.series = [{}]
    }
    if (!options?.series?.[0]) {
      options.series[0] = {}
    }

    if (!options.series?.[0]?.data?.length) {
      options.series[0].data = [...data]
    }
  }

  let baseOptions: any = {
    color,
    title: {
      text: '',
      left: 'left',
      padding: [2, 2, 2, 2],
      textStyle: {
        fontSize: getViewportPx(16)
      }
    },
    tooltip: {
      // confine: true,
      // trigger: 'axis',
      // // formatter: '{b}：{c}',
      // axisPointer: {
      //   type: 'shadow'
      // },
      // textStyle: {
      //   fontSize
      // }
    },
    grid: {
      // top: 65,
      left: '10%'
      // left: getViewportPx(72),
      // right: 0
      // bottom: getViewportPx(100)
    },
    legend: {
      show: false,
      // bottom: getViewportPx(16),
      // itemWidth: parseInt(getViewportPx(16, true)),
      // itemHeight: parseInt(getViewportPx(16, true)),
      // itemGap: parseInt(getViewportPx(22, true)),
      // icon: 'circle',
      // textStyle: {
      //   fontSize: getViewportPx(16),
      //   color: 'rgba(148, 148, 148, 1)'
      // },
      // right: getViewportPx(56)
    },
    series: options.series.map((seriesItem, seriesIndex) =>
      merge(
        {
          // name: '',
          type: 'radar',
          tooltip: {
            trigger: 'item'
          },
          areaStyle: {
            color: color[seriesIndex || 0]
          },
          // barMaxWidth: getViewportPx(50, true),
          // barWidth: getViewportPx(20),
          // label: {
          //   color: 'inherit',
          //   backgroundColor: 'transparent',
          //   fontSize: getViewportPx(12),
          //   show: true,
          //   position: options?.xAxis?.type === 'value' ? 'right' : 'top'
          // },
          // barMinHeight: getViewportPx(10, true)
        },
        seriesItem
      )
    )
  }
  baseOptions = merge(baseOptions, options)
  return {
    baseOptions
  }
}
